@layout("/common/_testloginreCommond.html"){
<style>
    .login{
        text-align: center;
        padding: 3em 0 9em;
        background: url("${ctxPath}/static/weixin-img/headerBackground.jpg") no-repeat;
        background-size: 100% 100%;
    }
    .login > img {
        width: 25%;
    }
    .login > h3 {
        color: white;
        font-weight: bold;
        letter-spacing: 0.1em;
    }
    .signIn{
        position: absolute;
        top: 48%;
        width: 100%;
    }
    .signIn > div{
        width: 75%;
        background: white;
        border: 1px solid #cccccc;
        border-radius: 0.9em;
        padding-left: 1em;
        margin: 1.2em auto;
    }
    .signIn > div > input , .signIn > div > select{
        border: none;
        vertical-align: middle;
        padding-left: 0.5em;
        -webkit-appearance: none;
        background: white;
        width: 80%;
    }
    .signIn > div > span{
        display: inline-block;
        height: 2.1em;
        line-height: 2.1em;
        padding-left: 0.5em;
        width: 80%;
        vertical-align: middle;
    }
    .signIn > button{
        margin-left: 50%;
        transform: translateX(-50%);
        margin-top: 3em;
    }
    .btnBox{
        text-align: center;
        position: absolute;
        width: 100%;
        top:80%;
    }
    .btnBox > button{
        outline:0 none !important;
        background: #419eea;
        border: 1px solid #419eea;
        color: white;
        width: 30%;
        border-radius: 1em;
    }
</style>
<div style="height: 100%;">
    <!--login-->
    <div class="login">
        <img src="${ctxPath}/static/weixin-img/login.png" alt="加载中...">
        <h3>咿呀口腔门诊管理系统</h3>
    </div>
    <!--输入框-->
    <div class="signIn">
        <div>
            <img src="${ctxPath}/static/weixin-img/01.png" alt="加载中..." style="width: 7%">
            <input type="text" id="userName" placeholder="用户名" class="inputStyle"/>
        </div>
        <div>
            <img src="${ctxPath}/static/weixin-img/02.png" alt="加载中..." style="width: 7%">
            <input type="password" id="passWord" placeholder="密码" class="inputStyle"/>
        </div>
        <div>
            <img src="${ctxPath}/static/weixin-img/03.png" alt="加载中..." style="width: 7%">
            <!--<select id="outpatientName" class="inputStyle"></select>-->
            <span id="outpatientName">请选择门店</span>
        </div>
    </div>
    <!--按钮-->
    <div class="btnBox">
        <button type="submit" class="btn btn-default" id="submit_login">登录</button>
    </div>
</div>
<script src="${ctxPath}/static/mobileSelect/js/mobileSelect.js"></script>
<link href="${ctxPath}/static/mobileSelect/css/mobileSelect.css" rel="stylesheet">
<script>
    $(function () {
        //初始化下拉到店门诊列表
        $.post(Feng.ctxPath + "/outpatientManagement/getList", function (data) {
            var arr= [];
            for(var i = 0; i < data.length; i++){
                arr.push(data[i].simplename)
            }
            var mobileSelect1 = new MobileSelect({
                trigger: '#outpatientName',
                title: '请选择门店',
                wheels: [
                    {data:arr}
                ],
                position:[2] //初始化定位
            });
        }, "json");
        $('#submit_login').click(function () {
            var userName = $('#userName').val();
            var passWord = $('#passWord').val();
            var outpatientName = $('#outpatientName').text();
            if(outpatientName == "请选择门店"){
                alert("请选择门店!")
            }else {
                $.ajax({
                    url: "${ctxPath}/login",
                    type: "post",
                    data: {
                        "username": userName,
                        "outpatientName": outpatientName,
                        "password": passWord
                    },
                    success: function (data) {
                        window.location.href = "${ctxPath}/index";
                    },
                    error: function (data) {
                        alert('账户,密码或验证码错误，请稍后再试!');
                        window.location.href = "${ctxPath}/login";
                    }
                });
            }
        });

        var viewHeight = window.innerHeight;
        $("input").focus(function(){
            var signInTop = $(".signIn").offset().top;
            var btnTop = $(".btnBox").offset().top;
            $(".Resetbody").css({"height":viewHeight,"background-size":"100%"});
            $(".signIn").css('top',signInTop);
            $(".btnBox").css('top',btnTop);
        });
    })
</script>
@}
